<template>
    <div>
        {{form}}
        <van-field label="名称" v-model="form.name"/>
        选择课程<select v-model="form.course_id">
            <option :value="i.id" v-for="i in courselist">{{i.title}}</option>
        </select>
        上传视频
        <!-- <video :src="'http://localhost:5000'+form.video_url"
        controls="controls" width="200px" height="200px" /> -->
        
        <video :src="'http://localhost:5000'+form.video_url" 
        controls="controls" width="200px" height="200px" v-if="form.video_url"/>
        
        
        <van-uploader :after-read="vedio_upload" accept='.mp4'/>
        <van-button @click="add">添加</van-button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                form:{'video_url':''},
                courselist:[]
            }
        },
        methods:{
            //获取课程列表
            getcourlist(){
                this.$axios.get('courseM')
                .then(res=>{
                    this.courselist=res.data.list
                })
            },
            vedio_upload(file){
                //必须选择课程id
                if(this.form.course_id){
                    //视频上传 只要有上传文件 就要封装formdata
                    let formdata=new FormData()
                    //传文件
                    formdata.append('file',file.file)
                    //传课程id
                    formdata.append('course_id',this.form.course_id)
                    this.$axios.post('vedioUpload',formdata)
                    .then(res=>{
                        this.form.video_url=res.data.url
                    }) 
                }else{
                    alert('请选择课程后再上传视频')
                }
            },
            add(){
                this.$axios.post('zjieM',this.form)
                .then(res=>{
                    if(res.data.code==200){
                        alert('添加成功')
                    }
                })
            },
        },
        mounted(){
            this.getcourlist()
        },
    }
</script>

<style scoped>

</style>